<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录系统</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <script src="/js/jquery-3.7.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</head>
<body style="background-color: azure;">
<div style="width: 1550px; height: 700px; position: relative; top: 20px;">
    <h1 style="position: relative; left: 650px;">欢迎登录学生信息系统</h1>
    <div style="width: 400px; height: 250px; position: relative; left: 630px; top: 100px;">
        <div class="panel-body" style="background-color: rgb(191, 232, 191); border-radius: 5% 5% 5% 5%; width: 350px; height: 210px; position: relative; left: 20px; top: 20px; box-shadow: 0px 20px 2px rgba(190, 237, 190, 0.2), 0px 5px 10px rgba(193, 240, 193, 0.2), 0px 30px 50px rgba(176, 216, 176, 0.4), 30px 50px 50px rgba(200, 247, 200, 0.2), -30px 50px 50px rgba(180, 226, 180, 0.2), inset 20px 0px 60px rgba(190, 244, 190, 0.2), inset -20px 0px 60px rgba(186, 232, 186, 0.2);">
            <form>
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                </div>
                <button type="button" class="btn btn-success" onclick="login();" style="position: relative; left: 105px; width: 100px;">登录</button>
            </form>
        </div>
    </div>
    <a href="/forget.html" style="position: absolute; left: 770px; bottom: 280px; font-size: 18px;">Forget password?</a>
</div>
<script type="text/javascript">
    function login() {
        var name = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            url:"/webapi/login/user",
            data:{
                username:name,
                password:password
            }
        }).done(function (rs){
            if(rs >= 0){
                //成功
                window.location.href="/students.html";
            }else {
                alert("出错了，您的用户名和密码是错误的！！！")
            }
        });
    }
</script>
<script src="/plugins/layui/layui.js"></script>
</body>
</html>
